<template>
  <div>
    <ElDivider>查询字段</ElDivider>
    <ElTable :data="tableColumn" :show-header="false">
      <ElTableColumn prop="label" label="标签">
        <template #default="scope">
          {{ scope.row.formItemProps.label }}
        </template>
      </ElTableColumn>
      <ElTableColumn prop="label" label="条件">
        <template #default="scope">
          <Select v-model="scope.row.formItemProps.condition" :options="conditions"></Select>
        </template>
      </ElTableColumn>
    </ElTable>
  </div>
</template>

<script setup lang="ts" name="SearchColumnPanel">
import { computed } from "vue";
import { ElDivider, ElTable, ElTableColumn } from "element-plus";
import { Select } from "@/components/Form";
const props = defineProps({
  designer: {
    type: Object
  }
});
const tableColumn = computed(() => props.designer!.widget!.widgetList.filter(widget => widget.formItemProps));
const conditions = [
  { label: "等于", value: "eq" },
  { label: "模糊", value: "like" },
  { label: "左模糊", value: "like_left" },
  { label: "右模糊", value: "like_right" },
  { label: "范围区间", value: "between" },
  { label: "存在任意", value: "in" }
];
</script>

<style scoped></style>
